<template>
	<view>
		<view class="status_bar"></view>

		<view class="to-back flex-box" @tap="goBack">
			<view class="icon-font">&#xe612;</view>
			手机号登录
		</view>

		<view class="content">
			<view class="input-box flex-box">
				<input class="input" v-model="phone" maxlength="11" type="number" focus placeholder="请输入手机号" />
				<view class="icon-font" v-if="phone" @tap="phone = ''">&#xe62e;</view>
			</view>
			<view class="input-box flex-box">
				<input class="input" v-model="password" type="text" password placeholder="请输入密码" />
				<view class="forget-pwd">忘记密码?</view>
			</view>

		</view>
		<view class="next" @tap="login">登录</view>
	</view>
</template>

<script>
	import {
		login
	}
	from '@/api/account.js';
	import {
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				phone: '',
				password: '',
			};
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			login() {
				const phone = this.phone.trim()
				const password = this.password.trim()
				if (!phone.length) {
					this.$pubFuc.showToast('请输入手机号')
					return false;
				}
				if (!(/^1[3456789]\d{9}$/.test(phone))) {
					this.$pubFuc.showToast("手机号码有误，请重填");
					return false;
				}
				if (password.length < 6) {
					this.$pubFuc.showToast('密码最短为 6 个字符')
					return false;
				}

				uni.showLoading();
				login({
					phone,
					password
				}).then(res => {
					// 保存登录状态
					this.$store.dispatch('saveLogin', res)
					uni.hideLoading();

					uni.switchTab({
						url: '/pages/index/index'
					});
				})
			},


		}
	}
</script>

<style lang="scss">
	.to-back {
		font-size: 38rpx;
		font-weight: 600;
		height: 100rpx;
		line-height: 100rpx;
		margin-left: 40rpx;

		.icon-font {
			font-weight: normal;
			font-size: 40rpx;
			margin-right: 40rpx;
		}
	}

	.content {
		width: 650rpx;
		margin: 40rpx auto;
	}

	.input-box {
		border-bottom: 1px solid #cdcdcd;

		height: 100rpx;
		line-height: 100rpx;
		justify-content: space-between;

		.input {
			width: 70%;
			font-size: 26rpx;
			height: 100rpx;
			line-height: 100rpx;
			caret-color: #DD2D20;
		}

		.forget-pwd {
			font-size: 24rpx;
			color: #6c90ad;
		}
	}


	.next {
		margin: 50rpx auto;
		width: 550rpx;
		background-color: #DD2D20;
		color: #fff;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 50rpx;
		text-align: center;
	}
</style>
